<template>
  <view class="page circle-edit">

    <view class="nav-bar">
      <view class="nav-search">
        创建圈子
      </view>
    </view>

    <uni-forms ref="form" :modelValue="circle" :rules="rules" validate-trigger="bind" label-position="top"
               label-width="100%">
      <uni-forms-item label="圈子头像:" name="headImage">
        <image-upload v-show="isOwner" :onSuccess="onUnloadImageSuccess">
          <image :src="circle.headImage" class="circle-image"></image>
        </image-upload>
        <head-image v-show="!isOwner" :name="circle.remark"
                    :url="circle.headImage" :size="200"></head-image>
      </uni-forms-item>

      <uni-forms-item label="圈子名称:" name="name" :required="true">
        <uni-easyinput type="text" v-model="circle.name" :disabled="!isOwner" placeholder="请输入圈子名称"/>
      </uni-forms-item>
      <uni-forms-item label="是否允许被搜索:" name="isSearchable" :required="true">
        <switch :disabled="!isOwner" color="#2782D7" :checked="circle.isSearchable" style="transform:scale(0.6)" @change="switchSearchable()"/>
      </uni-forms-item>
      <uni-forms-item label="是否允许新成员加入:" name="isAllowJoin" :required="true">
        <switch :disabled="!isOwner" color="#2782D7" :checked="circle.isAllowJoin" style="transform:scale(0.6)" @change="switchAllowJoin()"/>
      </uni-forms-item>

      <uni-forms-item label="圈子简介:" name="notice">
        <uni-easyinput type="textarea" v-model="circle.notice" :disabled="!isOwner" placeholder="请输入简介"/>
      </uni-forms-item>
    </uni-forms>
    <button style="background: #2782D7" type="primary" @click="submit()">提交</button>
  </view>
</template>

<script>

import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

export default {
  components: {UniIcons},
  data() {
    return {
      circle: {},
      rules: {
        name: {
          rules: [{
            required: true,
            errorMessage: '请输入圈子名称',
          },{
            validateFunction: function (rule, value, data, callback) {
              if (value.length <= 20) {
                return true
              } else {
                callback('圈子名称不能超过20个字符');
              }
              return true
            }
          }]
        }
      }
    }
  },

  methods: {
    switchSearchable() {
      this.circle.isSearchable = !this.circle.isSearchable
    },
    switchAllowJoin() {
      this.circle.isAllowJoin = !this.circle.isAllowJoin
    },
    onNavBack() {
      uni.switchTab({
        url: "/pages/circle/circle"
      })
    },
    submit() {
      if (this.circle.id) {
        this.modifyCircle();
      } else {
        this.createNewCircle();
      }
    },
    onUnloadImageSuccess(file, res) {
      this.circle.headImage = res.data.originUrl;
      this.circle.headImageThumb = res.data.thumbUrl;
    },
    modifyCircle() {
      this.$http({
        url: "/circle/modify",
        method: "PUT",
        data: this.circle
      }).then((circle) => {
        uni.showToast({
          title: "修改圈子信息成功",
          icon: 'none'
        });
        uni.switchTab({
          url: "/pages/circle/circle"
        });
      })
    },
    createNewCircle() {
      this.$http({
        url: "/circle/create",
        method: 'POST',
        data: this.circle
      }).then((circle) => {
        this.circleStore.myCircles.unshift(circle);
        uni.showToast({
          title: `圈子创建成功,正在跳转`,
          icon: 'none',
          duration: 1500
        });
        setTimeout(() => {
          uni.switchTab({
            url: "/pages/circle/circle"
          });
        }, 1000);
      })
    },
    loadCircleInfo(id) {
      this.$http({
        url: `/circle/detail/${id}`,
        method: 'GET'
      }).then((circle) => {
        this.circle = circle;
      });
    },

    initNewCircle() {
      let userInfo = this.userStore.userInfo;
      this.circle = {
        name: `${userInfo.userName}的圈子`,
        headImage: userInfo.headImage,
        headImageThumb: userInfo.headImageThumb,
        aliasName: userInfo.nickName,
        ownerId: this.userStore.userInfo.id,
        isSearchable: true,
        isAllowJoin: true
      }
    }
  },

  computed: {
    isOwner() {
      return this.userStore.userInfo.id == this.circle.ownerId
    }
  },

  onLoad(options) {
    if (options.id) {
      this.loadCircleInfo(options.id);
    } else {
      this.initNewCircle();
    }
  }

}
</script>

<style lang="scss" scoped>
.circle-edit {
  padding: 20rpx;

  .nav-bar {
    margin: 5rpx;
    display: flex;
    align-items: center;
    padding-bottom: 20rpx;
  }

  .nav-search {
    flex: 1;
    display: flex; /* 让 .nav-search 也成为一个 flex 容器 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
  }

  .circle-image {
    width: 200rpx;
    height: 200rpx;
    border: 1px solid #ccc;
    border-radius: 5%;
  }
}
</style>